<template>
<SwModal :isShow.sync="isShow" :title="'loginAuthentication'" :ok="submit" :okText="'determineBth'" modalClass="userModalBackg userModalBorder" :isShowCloseBtn = "false">
  <form class="loginVerify" @keydown.enter="submit">
    <h3 class="title2" v-show="isPhone && type !== 102">{{lang.loginPhoneNumer}}：{{userInfo.Phone}}</h3>
    <h3 class="title2" v-show="!isPhone && type !== 102">{{lang.register_EmailUser}}：{{userInfo.Email}}</h3>
    <ul>
      <li class="yzmin" v-show="type === 101 || type === 103">
        <label>{{lang['register_erificationCode']}}</label>
        <div>
          <input type="text" maxlength="6" v-model="smsCode">
          <a class="sendBtn">
            <span :class="{disabled: isSending}" @click="sendSMS">
              {{isSending ? lang.register_ClickGett + '(' + seconds + ')' : lang.register_ClickGet}}
            </span>
          </a>
        </div>
      </li>
      <li v-show="type === 102 ||type === 103">
        <label>{{lang['loginCodeGoogle']}}</label>
        <div>
          <input type="password" maxlength="6" v-model="googleCode">
        </div>
      </li>
    </ul>
    <div v-show="type === 102 ||type === 103" class="pointOut">{{lang['login Google authentication']}}</div>
  </form>
</SwModal>
</template>

<script>
import { Http } from '@/service/Http/index.js'
import SwModal from '@/components/SwModal'
import ModalApi from '@/components/SwModal/api.js'
import store from '@/store/index.js'

export default {
  data () {
    return {
      type: 0, // 101:remoteVerify 102:googleVerify 103:googleAndRemoteVerify
      isShow: true,
      userInfo: {},
      phoneOrEmail: '',
      smsCode: '',
      googleCode: '',
      isSending: false,
      seconds: 120,
      isPass: false
    }
  },
  computed: {
    lang () {
      return store.state.lang.lang
    },
    isPhone () {
      return this.userInfo.Phone
    }
  },
  components: {
    SwModal
  },
  methods: {
    ok () {},
    // 发送验证码
    sendSMS () {
      if (this.isSending) return

      this.isSending = true
      Http.post('Customer/SendSecuriryCode', {
        verifyDeviceType: this.isPhone ? 1 : 2, // 1，手机；2 邮箱 标识手机发送还是邮箱发送
        clientType: 0, // 客户端类型：0，网页，1，android,2,ios
        areaCode: this.isPhone ? this.userInfo.AreaCode.replace('+', '') : '', // 区号
        phoneOrEmail: this.isPhone ? this.userInfo.Phone : this.userInfo.Email
      })
      .then((res) => {
        if (res.StatusCode === '200') {
          ModalApi.message(this.lang['VerificationCodeSuccessful']) // '验证码发送成功'
          // 倒计时
          let that = this
          let interval = window.setInterval(() => {
            if ((that.seconds--) <= 0) {
              window.clearInterval(interval)
              that.seconds = 120
              that.isSending = false
            }
          }, 1000)
        } else {
          this.isSending = false
        }
      })
    },
    submit () {
      if (this.type === 101 || this.type === 103) {
        if (!this.smsCode) {
          ModalApi.message(this.lang['register_PleaseerificationCode'])
          return
        }
      }
      if (this.type === 102 || this.type === 103) {
        if (!this.googleCode) {
          ModalApi.message(this.lang['PleaseGoogleCode'])
          return
        }
      }
      Http.post('Customer/SignInStrategy', {
        AreaCode: this.isPhone ? this.userInfo.AreaCode.replace('+', '') : '',
        PhoneOrEmail: this.isPhone ? this.userInfo.Phone : this.userInfo.Email,
        VerifyCode: this.smsCode,
        GoogleCode: this.googleCode,
        clientType: 0
      })
      .then((res) => {
        res.StatusCode === '200' && (this.isPass = true)
        this.ok(this.isPass)
      })
    },
    close () {
      this.isShow = false
    }
  }
}
</script>

<style lang="less">

.loginVerify {
  width:400px;
  border-radius: 5px;
  padding:0 40px;
  margin-top: 30px;
}
.loginVerify .title2 {
  line-height: 40px;
  text-align:center;
  color: #fff;
  font-size: 20px;
}

.loginVerify li {
  position: relative;
   }

.loginVerify li label {
  display: block;
  padding-bottom: 5px;
  color: #fff;
}
.loginVerify li div{
  position: relative;
    }
.loginVerify li div input {
  line-height: 38px;
  height: 38px;
  width: 100%;
  border-radius: 3px;
  padding-left: 10px;
  font-size: 16px;
  color: #fff;
  background: #132032;
  border: 1px solid #4E5A84;
  border-radius: 2px;
}

.loginVerify li.yzmin .sendBtn {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
  text-align: center;
  height: 48px;
  line-height: 48px;
  color:#fff;
}
.loginVerify li.yzmin .sendBtn:after {
  position: absolute;
  left: 0;
  top: 10px;
  content: "";
  height:28px;
  width: 1px;
  background-color: #e5f7fe;
}
.loginVerify li.yzmin .sendBtn span { display: block; }
.loginVerify li.yzmin .sendBtn span.colorActive {color: #ccc;}
.loginVerify .subitmBox{ display:block; height: 46px; border-radius: 5px; width:300px; background-color: #213763; font-size: 20px; color: #fff;  margin: 36px auto; text-align: center; line-height: 46px;  }
.loginVerify .pointOut {padding-top:10px;padding-bottom:20px;line-height:20px;font-size: 12px;color: #ccc;}
</style>
